<!-- 基础：4、计算属性 计算属性 vs Watched Property -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：4、计算属性 计算属性 vs Watched Property</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 这里我们想达到的效果是，表格里填入名和姓，下面显示生成的姓名
		这里要解决两个问题：
		（1）在填写表格时，能实时改变vue实例中的数据，马上想到v-model（用法参照demo4.html）
		（2）改变名或姓时，能实时生成完整的姓名，我们用过一个类似的东西，在demo7.html中的vm.$watch()
			 watch是一个实例选项属性，可以对数据变动进行实时监听，回调方法假如只有一个参数，则为改变
			 后的新值 function(newVal) ，假如有两个参数，则分别为改变前后的新旧值 function(newVal, oldVal)
	 -->
	<div id="app">
		<p>firstName: <input v-model="firstName"></p>
		<p>lastName: <input v-model="lastName"></p>
		<p>{{ fullName }}</p>
	</div>

	<!-- 有没有更简洁的写法？有，计算属性 -->
	<div id="app1">
		<p>firstName: <input v-model="firstName"></p>
		<p>lastName: <input v-model="lastName"></p>
		<p>{{ fullName }}</p>		
	</div>

	<!-- 也不是说哪种一定更好，每种特性都有其合适的应用场景，在实际开发中需要举一反三灵活使用 -->

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				firstName: 'Foo',
				lastName: 'Bar',
				fullName: 'Foo Bar'
			},
			watch: {
				firstName: function(val, oldVal) {
					console.log(oldVal)
					this.fullName = val + ' ' + this.lastName
				},
				lastName: function(val){
					this.fullName = this.firstName + ' ' + val
				}
			}
		})

		var vm1 = new Vue({
			el: '#app1',
			data: {
				firstName: 'hu',
				lastName: 'yihao'
			},
			computed: {
				fullName: function(){
					return this.firstName + ' ' + this.lastName
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->